<template>
	<view class="around-details-wrap">
		<!-- 头部 -->
		<view class="header">
			<uni-nav-bar 
			:status-bar="true" 
			fixed 
			title="周边商家详情" 
			leftIcon="back" 
			@clickLeft="clickLeft"
			>
			</uni-nav-bar>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="content-header-wrap">
				<view class="header-wrap">
					<view class="header-wrap-top">
						<view class="uni-margin-wrap">
							<swiper class="swiper" circular autoplay="true" interval="2000" duration="5000">
								<swiper-item class="swiper-item-wrap" v-for="(item, index) in merchantInfoObj.fileIds" :key="index">
									<view class="swiper-item">
										<image class="around-header-image" :src="item"mode="aspectFit"></image>
									</view>
								</swiper-item>
							</swiper>
						</view>
						<view class="header-title-text">{{merchantInfoObj.peripheralName}}</view>
					</view>
					<view class="around-address-wrap">
						<view class="address-title">商家地址</view>
						<view class="address-info">{{merchantInfoObj.address || '--'}}</view>
					</view>
				</view>
				<view></view>
			</view>
			<view class="records-list-wrap">
				<view class="record-list-have">
					<view class="record-list-title">
						<view class="records-title">巡查记录</view>
					</view>
					<view class="records-list-content" v-if="patrolRecordObj.totalPage">
						<view class="list">
							<view class="item" v-for="(item, index) in patrolRecordObj.resultList" :key="index">
								<view class="record-item-date">{{item.createTime}}</view>
								<view class="record-item-content">
									<text decode="true">{{item.content}}</text>
								</view>
								<view class="record-item-image" v-if="item.fileIds.length > 0">
									<view 
										class="image-wrap"
										 :class="[
											 {single: item.fileIds.length === 1},
											 {two: item.fileIds.length === 2},
											 {three: item.fileIds.length >= 3}
										 ]"
										v-for="(group, idx) in item.fileIds" 
										:key="idx"
										>
										<image class="image" mode="aspectFit" :src="group" @click="previewImage(item.fileIds, idx)"></image>
									</view>
								</view>
								<view class="template-block"></view>
							</view>
						</view>
						<view class="check-more" v-if="patrolRecordObj.totalPage > 3">
							<button>
								<text>查看更多</text>
								<uni-icons type="more-filled"></uni-icons>
							</button>
						</view>
					</view>
				</view>
				<view class="record-list-nothing" style="padding: 20rpx 36rpx" v-if="!patrolRecordObj.totalPage">(无)</view>
			</view>
			<!-- 悬浮按钮 -->
			<view class="fab-button-wrap">
				<uni-fab
					:content="content"
					horizontal="right"
					vertical="bottom"
					direction="vertical"
					@trigger="trigger"
				></uni-fab>
			</view>
		</view>
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	export default {
		components: {uniFab},
		data() {
			return {
				orgId: '',
				imgHeaderUrl: '',
				peripheralId: '',
				peripheralName: '',
				merchantInfoObj: {},
				patrolRecordObj: {},
				page: 1,
				pageSize: 3,
				totalCount: 0, // 总记录数
				content: [{
						iconPath: '/static/img/fav/iconAdd.png',
						selectedIconPath: '/static/img/fav/iconAddHL.png',
						text: '添加',
						active: false
					},
					{
						iconPath: '/static/img/fav/templateIndex.png',
						selectedIconPath: '/static/img/fav/templateHL.png',
						text: '查看',
						active: false
					}]
			}
		},
		onLoad(option) {
			this.orgId = this.$store.state.orgId
			this.peripheralId = option.peripheralId
			this.peripheralName = option.peripheralName
			let {host, port} = uni.getStorageSync('imgServer')
			this.imgHeaderUrl = host + ':' + port + '/img/'
			this.init()
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			init () {
				this.getMerchantsDetails()
				this.getPatrolRecordList()
			},
			/**
			 * @description: 获取商家信息详情
			 * @author: LinW
			 * @createDate: 2019-09-10 10:11
			 */
			getMerchantsDetails() {
			  this.$request.ygstPeripheralFoodShopGet(this.peripheralId).then(res => {
				console.log('列表页面返回的参数 res::', res)
				if (!this.$utils.isEmptyObject(res)) {
					if (res.fileIds.length > 0) {
						for (let i = 0; i < res.fileIds.length; i++) {
							res.fileIds[i] = this.imgHeaderUrl + res.fileIds[i]
						}
					} else {
						// res.fileIds.push('../../static/img/common/has_img_icon.png')
					}
				}
				this.merchantInfoObj = res
				console.log('new this.merchantInfoObj', this.merchantInfoObj)
			  }).catch(e => {
				console.log(e)
			  })
			},
			/**
			 * @description: 获取巡查记录列表
			 * @author: LinW
			 * @createDate: 2019-09-10 13:54
			 * @param: mod
			 * @return:
			 */
			getPatrolRecordList() {
			  let params = {
				orgId: this.orgId,
				peripheralName: this.peripheralName,
				page: this.page,
				pageSize: this.pageSize
			  }
			  this.$request.ygstPatrolRecordListGet(params).then(res => {
				console.log('商家页面获取 3 条巡查记录 res______________:', res)
				const data = res
				if (!this.$utils.isEmptyObject(data.resultList)) {
					for (let i = 0; i < data.resultList.length; i++) {
						for(let j = 0; j < data.resultList[i].fileIds.length; j++) {
							data.resultList[i].fileIds[j] = this.imgHeaderUrl + data.resultList[i].fileIds[j]
						}
					}
				}
				this.patrolRecordObj = data
				this.totalCount = data.totalCount
				console.log('处理后的数据——————：：', this.patrolRecordObj)
			  })
			},
			// 预览图片
			previewImage(urls, idx) {
				uni.previewImage({
					current: idx,
					urls: urls
				})
			},
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				if (e.index === 0) {
					uni.navigateTo({
					    url: `../createRecord/createRecord?peripheralId=${this.peripheralId}&peripheralName=${this.peripheralName}`,
					    animationType: 'pop-in',
					    animationDuration: 200
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.around-details-wrap {
	.content {
		.content-header-wrap {
			background-color: #F7F7F7;
			.header-wrap {
				.header-wrap-top {
					width: 100%;
					position: relative;
					.uni-margin-wrap {
						width: 100%;
						.swiper {
							.swiper-item-wrap {
								width: 100%;
								.swiper-item {
									.around-header-image {
										width: 100%;
									}
								}
							}							
						}
					}
					.header-title-text {
						box-sizing: border-box;
						padding: 10rpx 20px;
						font-size: 34rpx;
						color: #fff;
						background-color: rgba(0,0,0,.2);
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
					}
				}
				.around-address-wrap {
					box-sizing: border-box;
					padding: 20rpx 36rpx;
					font-size: 32rpx;
					display: flex;
					.address-title {
						flex: 0 0 150rpx;
					}
					.address-info {
						flex: 1;
						color: #ccc;
					}
				}
			}
		}
		// 记录列表
		.records-list-wrap {
			margin-top: 20rpx;
			// background-color: #F7F7F7;
			box-sizing: border-box;
			// padding: 20rpx 36rpx;
			.record-list-have {
				.record-list-title {
					.records-title {
						padding: 20rpx 36rpx;
						font-size: 32rpx;
					}
				}
				.records-list-content {
					.list {
						.item {
							width: 100%;
							box-sizing: border-box;
							padding: 20rpx 36rpx;
							margin-bottom: 20rpx;
							background-color: #F7F7F7;
							.record-item-content {
								word-break: break-all;
							}
							.record-item-image {
								display: flex;
								flex-flow: row wrap;
								.image-wrap {
									box-sizing: border-box;
									overflow: hidden;
									padding: 0rpx 5rpx;
									width: 100%;
									&.single {
										width: 100%;
									}
									&.two {
										max-width: 50%;
									}
									&.three {
										max-width: 33.33%;
									}
									.image {
										background-color: #F1F1F1;
										width: 100%;
										max-height: 600rpx;
									}
								}
							}
						}
						
					}
				}
			}
			
		}
	}
}
</style>
